<template>
    <div>
        <div class="flex justify-center items-center">
            <span class="h-[1px] w-15 bg-gray-200"></span>
            <span class="text-4xl text-gray-300 m-4">账号密码登录</span>
            <span class="h-[1px] w-15 bg-gray-200"></span>
        </div>
        <el-form :model="form" :rules="rules" ref="rulesRef">
            <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名">
                    <template #prefix>
                        <el-icon><User /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" show-password v-model="form.password" placeholder="请输入密码">
                    <template #prefix>
                        <el-icon><Lock /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="w-[240px]" type="primary" @click="login">登 录</el-button>
                <el-button class="w-[116px]" type="primary" plain @click="$router.push('/index/registry')">注 册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {loginRequest} from '@/api/user-api'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import { usePermissionStore } from '@/stores/permission'
import { useTabsStore } from '@/stores/tabs'

// 获取路由对象
const router = useRouter()
// 获取全局状态中的permission
const permissionStore = usePermissionStore()
// 获取全局状态中的tabs
const tabsStore = useTabsStore()

// 挂载完成：恢复Pinia存储数据为默认
onMounted(() => {
    permissionStore.resume()
    tabsStore.resume()
})

// 表单数据
const form = reactive({
    username: '',
    password: ''
})

// 表单数据校验规则
const rules = reactive({
    username: [
        {
            required: true,
            message: '用户名不能为空', 
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '密码不能为空', 
            trigger: 'blur'
        }
    ]
})

const rulesRef = ref()

// 登录提交
const login = () => {
    rulesRef.value.validate(valid => {
        if(valid) {
            loginRequest(form)
            .then(res => {
                if(res.code === 200) {
                    afterLogin(res.sessionId)
                } else if (res.code === 201) {
                    ElNotification({
                        message: res.msg,
                        type: 'warning',
                    })
                    afterLogin(res.sessionId)
                } else {
                    // 移除token
                    sessionStorage.clear()
                    ElNotification({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        } else {
            return false
        }
    })
}

// 登录成功后，获取必要的数据
const afterLogin = token => {
    // 存储token
    sessionStorage.setItem('token', token)
    // 获取菜单数据
    permissionStore.getMenus()
        .then(() => {
            // 跳转到home
            router.push('/home')
        })
}
</script>

<style scoped>

</style>